<script setup>
import { onMounted, onUpdated, ref } from 'vue'
import { useRouter, RouterView} from 'vue-router'
import banner from '../../components/TeacherBanner.vue'
const router = useRouter();
const goToPage = pageName => router.push(pageName);
const aside = ref(null);

const currentPath = ref(window.location.hash);

//添加选中函数
const addTriangle = function(){
    currentPath.value = window.location.hash;
    const lis = aside.value.children;
    const reg = new RegExp(currentPath.value)
    const chosen = document.querySelector('.aside-tri')
    if(currentPath.value == '#/'){
        return;
    }
    for (let i = 1; i < lis.length; i++) {
        if ( lis[i].children.length > 1 )     //给当前活跃的路由加上样式
        {
        }else if(reg.test(lis[i].children[0].hash)){
            console.log(lis[i].children[0].hash, i);
            lis[i].prepend(chosen)
        }
    }
}

// 页面刷新重新挂载的时候判断路由，添加样式
onMounted(() => {
    addTriangle();
})

//获得当前的路径的hash，监听浏览器hashchange事件
window.addEventListener('hashchange', () => {
    addTriangle();
})

onUpdated(()=>{
    addTriangle()
})

</script>

<template>
    <banner />
    <div class="container">
        <div class="aside">
            <ul ref="aside" style="width: 100%;">
                <li>专业</li>
                <li><div class="aside-tri"></div><a href="#/ManageTeachers" class="choice">管理教师</a></li>
                <li><a href="#/ManageProjects" class="choice">管理实践课题</a></li>
                <li><a href="#/ManageStudents" class="choice">管理学生</a></li>
                <li>
                <a href="../../../teacher.html#/MyCourse" style="padding-left: 0px">普通教师端入口</a>
            </li>   
            </ul>
        </div>
        <div class="main">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 60px;
    display: flex;
    justify-content: space-between;
}

.aside {
    width: 14%;
    background-color: #dbdde3;
    box-sizing: content-box;
    padding-left: 1%;
}

.aside ul {
    width: 100%;
    margin-top: 20px;
    padding-left: 0px;
}
.aside-tri{
    border-left: 9px solid #868688;
    border-bottom:9px solid transparent;
	border-top:9px solid transparent;
    position: absolute;
    border-radius: 3px;
    margin-top: 1.5%;
    transition: 1s;
}
.aside li{
    width: 100%;
    margin-bottom: 20px;
    list-style: none;
}
.aside li:nth-of-type(1),
.aside a {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: normal;
    color: #707070;
    padding-left: 13%;
    line-height: 100%;
}

.chooseLi {
    background-color: #f0f1f3;
    box-shadow: 0px 0px 10px 0.08px #aaa;
}

.choice {
    font-size: 16.5px;
}

.main {
    background-color: #f1f2f6;
    width: 86%;
    padding: 3.5%;
    padding-top: 1%;
    padding-bottom: 35px;
    height: 100%;
}
</style>
